<template>
	<view>
		<view class="header">
			<image src="../../static/images/login/bg.png" mode="" class="bg"></image>
			<view class="water-group">
				<view class="water water1" style="background-image: url(../../static/images/wave/wave.png);"></view>
				<view class="water water2" style="background-image: url(../../static/images/wave/wave.png);"></view>
				<view class="water water3" style="background-image: url(../../static/images/wave/wave.png);"></view>
			</view>
		</view>

		<view style="margin-top: 20rpx;">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="left">
				<uni-forms-item label="用户名:" name="username">
					<input class="input" v-model="formData.username" type="text" placeholder="请输入用户名"
						@input="binddata('username',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="邀请码:" name="inviteCode">
					<input class="input" v-model="formData.inviteCode" type="text" placeholder="请输入邀请码"
						@input="binddata('inviteCode',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="密码:" name="password">
					<input class="input" v-model="formData.password" type="text" placeholder="请输入密码"
						@input="binddata('password',$event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item label="确认密码:" name="surepassword">
					<input class="input" v-model="formData.surepassword" type="text" placeholder="确认密码"
						@input="binddata('surepassword',$event.detail.value)" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">提交</button>
		</view>
		
		<navigator class="login" url="/pages/login/login">
			已有账号?点击登录
		</navigator>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					username: '',
					inviteCode: '',
					password: '',
					surepassword: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 2,
								maxLength: 20,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					inviteCode: {
						rules: [{
								required: true,
								errorMessage: '请输入邀请码',
							},
							{
								pattern: '^[0-9a-zA-Z]{8}$',
								errorMessage: '邀请码格式不正确',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern: '^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$',
								errorMessage: '不能是纯数字且最小为8位'
							}
						]
					},
					surepassword: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									// 异步需要返回 Promise 对象
									return new Promise((resolve, reject) => {
										setTimeout(() => {
											if (value == this.formData.password) {
												// 通过返回 resolve
												resolve()
											} else {
												// 不通过返回 reject(new Error('错误信息'))
												reject(new Error('两次输入密码不一致'))
											}
										}, 1)
									})
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(async res => {
					const obj = {}
					obj.username = res.username
					obj.inviteCode = res.inviteCode
					obj.password = res.password
					const response = await uni.$http.post('/user/signUser', obj)
					console.log(response)
					if(response.statusCode == 802){
						if(response.data.msg == '用户名重复'){
							uni.$showMsg('用户名重复')
						} 
						if(response.data.msg == '邀请码无效'){
							uni.$showMsg('邀请码无效')
						}
					}
					if(response.statusCode == 200){
						uni.setStorageSync('token',response.data.data.token)
						this.$store.commit('initUserInfo',response.data.data)
						uni.showToast({
							title:'注册成功',
							success() {
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			loadfont() {
				uni.loadFontFace({
					family: 'ele',
					source: `url('/static/font/ele.TTF')`,
					success() {
			
					},
					fail(res) {
			
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}
	.header {
		position: relative;
		.bg {
			width: 100%;
			height: 600rpx;
		}
		
		.water-group {
			position: absolute;
			bottom: 0;
			height: 110px;
			width: 100%;
			overflow: hidden;
			background: linear-gradient(to bottom, #67c3a8, #fff);
		}
		
		.water-group .water {
			position: absolute;
			width: 200%;
			height: 100%;
			background-size: 100% 100%;
		}
		
		.water-group .water1 {
			top: 20px;
			left: -100%;
			opacity: 0.2;
			animation: water-right 20s infinite linear;
		}
		
		.water-group .water2 {
			top: 30px;
			left: 0;
			opacity: 0.3;
			animation: water-left 30s infinite linear;
		}
		
		.water-group .water3 {
			top: 45px;
			left: -100%;
			animation: water-right 40s infinite linear;
		}
		
		@keyframes water-right {
			0% {
				transform: translateX(0) translateZ(0) scaleY(1)
			}
		
			50% {
				transform: translateX(25%) translateZ(0) scaleY(0.85)
			}
		
			100% {
				transform: translateX(50%) translateZ(0) scaleY(1)
			}
		}
		
		@keyframes water-left {
			from {
				transform: translate(0%, 0px);
			}
		
			to {
				transform: translate(-50%, 0px);
			}
		}
	}
	
	.form {
		margin-top: 30rpx;
	}
	.uni-forms-item {
		position: relative;
		image {
			position: absolute;
			top: 40rpx;
			right: 95rpx;
			width: 160rpx;
			height: 60rpx;
			margin-left: 40rpx;
		}

		.input {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 480rpx;
			height: 100rpx;
			padding-left: 160rpx;
			border-bottom: 1px solid #ccc;
			font-size: 29rpx;
			&.last {
				display: inline-block;
				vertical-align: middle;
				width: 300rpx;
			}
		}
		.uni-error-message-text {
			position: absolute;
			top: -15rpx;
			left: 60rpx;
			width: 300rpx;
		}
	}

	button {
		width: 570rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 38rpx;
		color: #fff;
		background-color: #66c2a9;
		border-radius: 50rpx;
		margin-top: 80rpx;
	}
	.login {
		text-align: center;
		font-size: 29rpx;
		color: #66c2a9;
		margin: 40rpx;
	}
	.label-text {
		position: absolute;
		top: 32rpx;
		left: 65rpx;
		font-size: 29rpx!important;
	}
</style>
